<template>
  <div>
    <el-card>
      <!-- 表单 -->
      <el-form class="el-form-item-one" :inline="true" :model="formData">
        <el-form-item class="card_item" label="店铺名称：">
          <el-input v-model="formData.shopName" placeholder="请输入" />
        </el-form-item>
        <el-form-item class="card_item" label="订单号">
          <el-input v-model="formData.orderId" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="配送方式:">
          <el-select v-model="formData.dispatching" placeholder="请选择">
            <el-option label="飞机" value="飞机" />
            <el-option label="坦克" value="坦克" />
            <el-option label="自行车" value="自行车" />
          </el-select>
        </el-form-item>
        <el-form-item label="下单日期:">
          <el-date-picker
            v-model="formData.daterange"
            type="daterange"
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item prop="phone" label="手机号：">
          <el-input v-model="formData.phone" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small">查询</el-button>
          <el-button size="small" @click="btnClear">重置</el-button>
        </el-form-item>
      </el-form>
      <el-row class="btn">
        <el-button size="masll" type="primary" @click="btnAdd">增加</el-button>
      </el-row>
      <!-- tag 栏 -->
      <el-tabs v-model="activeName" type="card" @tab-click="tabClick">
        <el-tab-pane label="全部" name="qb" />
        <el-tab-pane label="待支付" name="待支付" />
        <el-tab-pane label="代配送" name="代配送" />
        <el-tab-pane label="代发货" name="待发货" />
        <el-tab-pane label="已支付" name="已支付" />
        <el-tab-pane label="已收货" name="已收货" />
        <el-tab-pane label="退款" name="退款" />
      </el-tabs>

      <el-table :data="tableData">
        <el-table-column prop="userId" label="商户ID" />
        <el-table-column prop="userName" label="商户名称" />
        <el-table-column prop="orderId" label="订单号" sortable />
        <el-table-column prop="goodsNumber" label="商品列表" sortable />
        <el-table-column prop="orderTime" label="下单时间" />
        <el-table-column prop="total" label="订单金额" sortable />
        <el-table-column prop="distribution" label="配送方式" sortable />
        <el-table-column prop="userName" label="收货人/提货人" sortable />
        <el-table-column prop="status" label="状态" />
        <el-table-column label="操作">
          <template slot-scope="{row}">
            <div>
              <span class="span" @click="showDialog(row)">订单</span>
              <span class="span" @click="delOrederList(row.id)">删除</span>
              <span class="span" @click="showEdit(row)">编辑</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        class="page"
        :current-page="page.pager"
        :page-sizes="[1, 2, 3, 4]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />

    </el-card>
    <orderdetail :show-order-dialog.sync="showOrderDialog" :order-minute-data="orderMinuteData" :oreder-goods-list="orederGoodsList" />
    <edit-order :show-edit-dialog.sync="showEditDialog" :order-list.sync="orderList" :goods-data="goodsData" :money="money" />
    <addOrder :show-add-order.sync="showAddOrder" />
  </div>
</template>

<script>
import { getOrderList, getStateList, deleteOrderList, getGoodsList } from '@/api/orderList.js'
import orderdetail from './components/component/orderdetail.vue'
import editOrder from './components/component/editOrder.vue'
import addOrder from './components/component/addOrder.vue'
export default {
  name: 'OrderList',
  components: {
    orderdetail,
    editOrder,
    addOrder
  },
  data() {
    return {
      orederId: 0, // 订单id
      money: 0, // 订单合计
      showAddOrder: false, // 增加订单详情
      showOrderDialog: false, // 订单详情弹窗
      showEditDialog: false, // 增加组件
      orederGoodsList: {}, // 该订单商品详情
      orderMinuteData: {}, // 订单详细信息
      total: 0, // 总条数
      page: {
        pager: 1, // 当前页
        pageSize: 2 // 每页显示条数
      },
      orderList: {}, // 单个订单详情
      goodsData: {}, // 商品详情
      tableData: [{
        activities: '',
        total: '',
        userName: '',
        coupon: '',
        deliveryCost: '',
        discounts: '',
        distribution: '',
        dispatchingSite: '',
        goodsNumber: '',
        goodsImg: '',
        goodsName: '',
        id: '',
        isShop: '',
        orderId: '',
        orderState: '',
        orderTime: '',
        pack: '',
        phone: '',
        salePrice: '',
        userId: '',
        status: ''
      }],
      formData: {
        dispatching: '',
        shopName: '',
        daterange: [],
        phone: ''
      },
      activeName: 'qb'
    }
  },
  created() {

  },
  mounted() {
    this.getOrderList()
  },
  methods: {
    btnClear() {
      this.formData = {
        dispatching: '',
        shopName: '',
        daterange: [],
        phone: ''
      }
    },

    // 订单增加
    btnAdd() {
      this.showAddOrder = true
    },

    // 订单编辑
    async  showEdit(row) {
      // console.log(row)
      // this.orederId = id
      // const { data } = await gitEditOrederId(id)
      // this.orderList = data.data
      this.orderList = row
      // console.log(row.goodsList)
      const { data } = await getGoodsList(row.goodsList)
      this.goodsData = data.data
      var goodMoney = 0
      data.data.forEach(item => {
        goodMoney += parseFloat(item.salesPrice)
      })
      this.money = goodMoney
      this.showEditDialog = true
    },

    // 订单详情
    async showDialog(row) {
      this.orderMinuteData = row
      const { data } = await getGoodsList(row.goodsList)
      this.orederGoodsList = data.data
      this.showOrderDialog = true
    },

    // 删除订单
    async  delOrederList(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteOrderList(id)
        if (this.activeName !== 'qb') {
          this.getStateList()
        } else {
          this.getOrderList()
        }
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      })
    },
    //
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getOrderList()
    },
    //
    handleCurrentChange(val) {
      this.page.pager = val
      this.getOrderList()
    },
    // // 订单列表
    async  getOrderList() {
      const { data } = await getOrderList(this.page)
      this.tableData = data.data
      this.total = data.total
    },
    tabClick() {
      if (this.activeName !== 'qb') {
        this.getStateList()
      } else {
        this.getOrderList()
      }
    },
    // 获取数据列表
    async  getStateList() {
      const { data } = await getStateList(this.page, this.activeName)
      console.log(data)
      this.tableData = data.data
    }
  }
}
</script>

<style lang="less" scoped>
.el-form-item-one{
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      // margin-left: 50px;
      // margin-right: 50px;
    }
    .card_item{ // 每个item
    width: 33.3%;
  }
.btn{
  display: flex;
  flex-direction: row-reverse;
  // margin: 10px 0;
  margin-top: 10px;
}
 .page{
        display: flex;
        justify-content: center;
    }
  .span{
        color: #409eff;
        margin-right: 5px;
    }
</style>
